<template>
  <div class="index-container">
    <div>
      赛道：
      <el-select v-model="screen" placeholder="请选择">
        <el-option
          v-for="item in screen_options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>
    <br />
    <div>
      队伍：
      <el-radio v-model="team" label="red">红队</el-radio>
      <el-radio v-model="team" label="yellow">黄队</el-radio>
    </div>
    <br />
    <div>
      赛局：
      <el-select v-model="match" placeholder="请选择">
        <el-option
          v-for="item in match_options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>
    <br />
    <div>
      分数：
      <el-input
        v-model="score"
        type="number"
        placeholder="请输入得分"
        style="width: 80px"
      ></el-input>
    </div>
    <br />
    <el-button type="success" @click="submit">提交分数</el-button>
  </div>
</template>

<script>
  import api from '../main'
  export default {
    name: 'Index',
    data() {
      return {
        team: 'red',
        screen: '',
        screen_options: [],
        match: '',
        match_options: [],
        score: '0',
      }
    },
    mounted() {
      for (let i = 1; i <= 6; i++)
        this.screen_options.push({ value: i, label: '赛道' + i })
      for (let i = 1; i <= 9; i++)
        this.match_options.push({ value: i, label: '赛局' + i })
    },
    methods: {
      submit() {
        if (this.screen == '') this.$message('请选择赛道！')
        else if (this.match == '') this.$message('请选择赛局！')
        else if (this.score == '' || this.score == '0')
          this.$message('请填写分数！')
        else {
          let params = {
            screen: this.screen,
            match: this.match,
            team: this.team == 'red' ? true : false,
            score: this.score,
          }
          let that = this
          this.$http
            .post(api + '/score/setScore', params)
            .then(function () {
              that.$message('分数提交成功！')
              that.score = '0'
            })
            .catch(function (error) {
              console.log(error)
            })
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .index-container {
    padding: 0 !important;
    margin: 0 !important;
    background: #f5f7f8 !important;
  }
</style>
